<template>
	<view class="cate">
		<my-search @myClick="gotoSearch"></my-search>
		<view class="dq_div">
			<scroll-view class="dq_div_left" :style="{height:vh+'px'}" :scroll-y="true">
				<view v-for="(item,index) in cateList1" :key="index" class="dq_div_left_item"
					:class="[active===index?'active':'']" @click="changeCateList(index)">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view class="dq_div_right" :style="{height:vh+'px'}" :scroll-y="true" :scroll-top="scrollTop">
				<view v-for="(item,index) in cateList2" :key="index">
					<view class="dq_title">
						{{item.cat_name}}
					</view>
					<view class="dq_goods">
						<view class="dq_goods_item" v-for="item2 in item.children" :key="item2.cat_id"
							@click="gotoGoodsList(item2.cat_id)">
							<image :src="item2.cat_icon.replace('dev','web')" mode="widthFix"></image>
							<text class="dq_goods_item_title">{{item2.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import mySearch from "../../components/mySearch/mySearch.vue"
	// 可用屏幕高度
	const vh = ref()
	// 左侧列表
	const cateList1 = ref([])
	//右侧菜单
	const cateList2 = ref([])
	//激活状态
	const active = ref(0)
	// 距离顶部距离
	const scrollTop = ref(0)
	//获取列表数据
	const getCateList1 = async () => {
		const res = await uni.$http.get("/api/public/v1/categories");
		if (res.data.meta.status !== 200) {
			return uni.$showMsg()
		}
		cateList1.value = res.data.message
		cateList2.value = res.data.message[0].children
	}
	// 切换激活选项
	const changeCateList = (index) => {
		active.value = index;
		cateList2.value = cateList1.value[index].children
		scrollTop.value = scrollTop.value == 0 ? 1 : 0
	}
	// 查看商品详情
	const gotoGoodsList = (id) => {
		uni.navigateTo({
			url: "/subpkg/goods_list/goods_list?cid=" + id
		})
	}
	// 跳转搜索界面
	const gotoSearch=()=>{
		uni.navigateTo({
			url:"/subpkg/search/search"
		})
	}
	onLoad(() => {
		const sysInfo = uni.getSystemInfoSync()
		vh.value = sysInfo.windowHeight-50;
		getCateList1()
	})
</script>

<style lang="scss" scoped>
	.dq_div {
		display: flex;

		.dq_div_left {
			width: 200rpx;

			.dq_div_left_item {
				width: 100%;
				height: 75rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgb(248, 248, 248);
				position: relative;
				font-size: 24rpx;
				font-weight: 500;

				&.active {
					background-color: rgb(254, 253, 254);
					color: red;

					&::before {
						content: "";
						width: 5rpx;
						height: 40rpx;
						background-color: red;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

			}
		}

		.dq_div_right {
			flex: 1;

			.dq_title {
				font-size: 28rpx;
				font-weight: 700;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.dq_goods {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.dq_goods_item {
					width: 33.3%;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.dq_goods_item_title {
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					image {
						width: 100rpx;
						height: 100rpx;
					}

				}

			}
		}
	}
</style>
